<template>
  <div class="login_container">
      <!--登陆表单-->
      <div class="login_form">
        <h3 class="title">购物商城</h3>
        <el-form ref="formRef" :model="loginForm" label-width="auto"> 
          <!-- 用户名 -->
          <el-form-item label="账号">
            <el-input v-model="loginForm.username" placeholder="用户名">
              <template #prefix>
                <el-icon class="el-input__icon"><User /></el-icon>
              </template>
            </el-input>
          </el-form-item> 
          <!-- 密码 -->
          <el-form-item label="密码" >
            <el-input v-model="loginForm.password" type="password" placeholder="密码">
              <template #prefix>
                <el-icon class="el-input__icon"><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item> 
          <!-- 记住我 和 忘记密码-->
          <div class="rememberMe">
            <el-checkbox v-model="loginForm.rememberMe" label="记住我" size="large" />
            <el-text class="mx-1 forget" type="danger">忘记密码</el-text>
          </div>
          <!-- 分割线 -->
            <el-divider content-position="center">其他登陆方式</el-divider>
          <!-- 其他登陆方式 -->
          <div class="other_login">
            <el-icon class="other_login_item"><ChromeFilled /></el-icon>
          </div>
          <!-- 按钮 -->
          <el-form-item>
            <el-button type="primary" round style="width: 100%;" @click="loginHandler()">登陆</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>

<script setup>
  // 导入ref
  import { ref } from 'vue';
  import {login} from '@/api/auth/index.js'
  import {setToken} from '@/utils/token/index.js'
  import {getSysMenus} from '@/api/user/menu.js'
  // 引入pinia的store
  import {useMenuStore} from '@/stores/menu.js'
  // 引入router
  import { useRouter } from 'vue-router';

  // 构建router
  const router = useRouter();
  // 构建store
  const menuStore = useMenuStore()
  // 声明表单绑定值
  const loginForm = ref({
    username: undefined,
    password: undefined,
    rememberMe: undefined,
  })

  function loginHandler() {
    login(this.loginForm).then((res)=> {
      if (res.data.code == 200) {
          // 将token值存储到pinia中
        // console.log("res set token=>", res.data.data.token)  
        setToken('token', res.data.data.token)
        menuStore.setUserInfo(res.data.data.userInfo)
        // 获取路由信息
        getSysMenus().then(res => {
          if (res.data.code == 200){
            // 将menuList存储到pinia中
            menuStore.setMenuList(res.data.data)
            // 跳转页面 动态渲染路由
            router.push('/index')
          }
        }).catch(err => console.log(err))
      }
    })
  }

</script>

<style lang="scss" scoped>

.login_container { 
  background: url('../assets/bgimg/1.jpg');
  background-size: 100%;
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  .login_form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    flex-direction: column;
    background-color: #fff;
    .title {
      margin-bottom: 20px;
    }
    .rememberMe {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .forget {
        cursor: pointer;
      }
    }
    .other_login {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      .other_login_item {
        cursor: pointer;
      }
    }
  }
}
.el-form {
  width: 60%;
}
.el-form-item {
  width: 100%;
}
</style>